<template>
  <div class="welcome-container">
    <!-- 顶部问候语和时间 -->
    <div class="greeting-section">
      <div class="greeting">
        {{ greeting }}"欢迎使用智链枢界商品管理系统"
      </div>
      <div class="current-time">
        {{ currentTime }}
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧通知区域 -->
      <div class="notification-section">
        <div class="card">
          <h3>通知公告</h3>
          <ul class="notification-list">
            <li v-for="(notice, index) in notifications" :key="index">
              {{ notice.noticeTitle }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧日历区域 -->
      <div class="calendar-section">
        <div class="card">
          <h3>日历</h3>
          <el-calendar v-model="currentDate" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listNotice } from "@/api/system/notice";
export default {
  data() {
    return {
      currentTime: '',
      currentDate: new Date(),
      notifications: []
    }
  },
  computed: {
    greeting() {
      const hour = new Date().getHours()
      if (hour < 12) {
        return '早上好！'
      } else if (hour < 18) {
        return '下午好！'
      } else {
        return '晚上好！'
      }
    }
  },
  mounted() {
    this.updateTime()
    setInterval(this.updateTime, 1000)
    this.getNotifications()
  },
  methods: {
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString()
    },
    async getNotifications() {
      try {
        const response = await listNotice()
        if (response.code === 200) {
          this.notifications = response.rows.map(item => ({
            content: item.noticeContent,
            noticeTitle: item.noticeTitle
          }))
        }
      } catch (error) {
        console.error('获取通知失败：', error)
        this.$message.error('获取通知失败')
      }
    }
  }
}
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}

.greeting-section {
  text-align: center;
  margin-bottom: 30px;
}

.greeting {
  font-size: 24px;
  color: #303133;
  margin-bottom: 10px;
}

.current-time {
  font-size: 18px;
  color: #606266;
}

.main-content {
  display: flex;
  gap: 20px;
}

.notification-section,
.calendar-section {
  flex: 1;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.card h3 {
  margin-bottom: 15px;
  color: #303133;
}

.notification-list {
  list-style: none;
  padding: 0;
}

.notification-list li {
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.notification-list li:last-child {
  border-bottom: none;
}
</style>
